<template>
  <view :data-theme="theme" class="user_payment">
    <form @submit="submitSub" report-submit='true'>
      <view class="payment-top acea-row row-column row-center-wrapper">
        <span class="name1">我的余额</span>
        <view class="pic">
          ￥<span class="pic-font">{{ nowMoney || 0 }}</span>
        </view>
      </view>
      <view class="payment">
        <view class='tip picList'>
          <view class="pic-box pic-box-color acea-row row-center-wrapper row-column"
                :class="activePic === index ? 'pic-box-color-active' : ''" v-for="(item, index) in packageList"
                :key="index" @click="picCharge(index, item)">
            <view class="pic-number-pic">
              {{ item.price }}<span class="pic-number"> 元</span>
            </view>
            <view class="pic-number">赠送：{{ item.giveMoney }} 元</view>
          </view>
          <view class="pic-box pic-box-color acea-row row-center-wrapper"
                :class="parseFloat(activePic)===parseFloat(packageList.length)?'pic-box-color-active':''"
                @click="picCharge(packageList.length)">
            <input type="digit" placeholder="其他" v-model="money" @input="onInput($event)" maxlength="5"
                   class="pic-box-money pic-number-pic uni-input"
                   :placeholder-class="parseFloat(activePic) === parseFloat(packageList.length) ? 'placeColor':''"
                   :class="parseFloat(activePic) === parseFloat(packageList.length) ? 'pic-box-color-active' : ''"
                   @blur="addMoney()"/>
          </view>
          <view class="tips-box">
            <view class="tips mt-30">注意事项：</view>
            <view class="tips-samll" v-for="item in noticeList" :key="item">
              {{ item }}
            </view>
          </view>
        </view>
        <!-- #ifndef  MP-->
        <view class='wrapper borRadius14  px-30' v-if='!active'>
          <view class='item'>
            <view>支付方式</view>
            <view class='list'>
              <view class='payItem acea-row row-middle' :class='curActive==index ?"on":""'
                    @tap='payItem(index)' v-for="(item,index) in cartArr" :key='index'
                    v-if="item.payStatus==1">
                <view class='name acea-row row-center-wrapper'>
                  <view class='iconfont animated'
                        :class='(item.icon) + " " + (animated==true&&active==index ?"bounceIn":"")'>
                  </view>
                  {{ item.name }}
                </view>
                <view class='tip'>{{ item.title }}</view>
              </view>
            </view>
          </view>
        </view>
        <!-- #endif -->
        <button class='but' formType="submit"> {{ active ? '立即转入' : '立即充值' }}</button>
        <view class="alipaysubmit" v-html="formContent"></view>
      </view>
    </form>
  </view>
</template>

<script>
import {
  rechargeRoutine,
  rechargeWechat,
  getRechargeApi,
  transferIn,
  appWechat,
  alipayFull,
  rechargeCreateApi
} from '@/api/user.js';
import {
  wechatQueryPayResult
} from '@/api/order.js';
import {
  toLogin
} from '@/libs/login.js';
import {
  mapGetters
} from "vuex";
import {
  Debounce
} from '@/utils/validate.js'

let app = getApp();
export default {
  data() {
    let that = this;
    return {
      navRecharge: ['账户充值', '佣金转入'],
      active: 0,
      toPrice: '',
      placeholder: "0.00",
      payChannel: '',
      packageList: [],
      activePic: 0,
      money: "",
      numberPic: '',
      rechar_id: 0,
      noticeList: [],
      theme: app.globalData.theme,
      cartArr: [],
      payType: '', //支付方式
      openType: 1, //优惠券打开方式 1=使用
      curActive: 0, //支付方式切换
      animated: false,
      formContent: '',
      nowMoney: 0
    };
  },
  computed: mapGetters(['isLogin', 'systemPlatform', 'userInfo']),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        if (newV) {
          this.getRecharge();
        }
      },
      deep: true
    }
  },
  onLoad() {
    if (this.isLogin) {
      this.getRecharge();
      this.payConfig();
    } else {
      toLogin();
    }
  },
  methods: {
    // 支付配置
    payConfig() {
      // 支付方式
      this.$store.dispatch('getPayConfig').then((res) => {
        this.nowMoney = res.userBalance;
        let cartArrs = res.payConfig.filter(e => e.value !== 'yue');
        this.cartArr = cartArrs;
        if (this.cartArr.length) {
          this.payType = this.cartArr[0].value;
        }
      });
    },
    onInput(e) {
      let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
      if (!val) {
        this.val = '';
        return
      }
      var reg = /[^\d.]/g
      // 只能是数字和小数点，不能是其他输入
      val = val.replace(reg, "")
      // // 保证第一位只能是数字，不能是点
      val = val.replace(/^\./g, "");
      // // 小数只能出现1位
      val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      // // 小数点后面保留2位
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
      this.$nextTick(() => {
        this.money = val;
      })
    },

    getAll() {
      this.toPrice = this.userInfo.brokeragePrice
    },
    /**
     * 选择金额
     */
    picCharge(idx, item) {
      this.activePic = idx;
      if (!item) {
        this.rechar_id = null;
        this.numberPic = "";
      } else {
        this.money = null;
        this.rechar_id = item.id;
        this.numberPic = null;
      }
    },


    /**
     * 充值额度选择
     */
    getRecharge() {
      getRechargeApi()
          .then(res => {
            this.packageList = res.data.packageList;
            if (this.packageList[0]) {
              this.rechar_id = this.packageList[0].id;
              this.numberPic = this.packageList[0].price;
            }
            this.noticeList = res.data.noticeList || [];
          })
          .catch(res => {
            this.$dialog.toast({
              mes: res
            });
          });
    },
    navRecharges: function (index) {
      this.active = index;
    },
    payItem: function (e) {
      let that = this;
      let active = e;
      that.curActive = active;
      that.animated = true;
      that.payType = that.cartArr[active].value;
    },
    /*
     * 用户充值
     */
    submitSub: Debounce(function (e) {
      let that = this
      let value = e.detail.value.number ? e.detail.value.number : that.numberPic;
      // 转入余额
      if (that.active) {
        if (parseFloat(value) < 0 || parseFloat(value) == NaN || value == undefined || value == "") {
          return that.$util.Tips({
            title: '请输入金额'
          });
        }
        uni.showModal({
          title: '转入余额',
          content: '转入余额后无法再次转出，确认是否转入余额',
          success(res) {
            if (res.confirm) {
              transferIn({
                price: parseFloat(value)
              }).then(res => {
                that.$store.commit("changInfo", {
                  amount1: 'brokeragePrice',
                  amount2: that.$util.$h.Sub(that.userInfo
                      .brokeragePrice, parseFloat(value))
                });
                return that.$util.Tips({
                  title: '转入成功',
                  icon: 'success'
                }, {
                  tab: 5,
                  url: '/pages/users/user_money/index'
                });
              }).catch(err => {
                return that.$util.Tips({
                  title: err
                });
              })
            } else if (res.cancel) {
              return that.$util.Tips({
                title: '已取消'
              });
            }
          },
        })
      } else {
        if (!this.payType) return this.$util.Tips({
          title: '请选择支付方式'
        });
        uni.showLoading({
          title: '正在支付',
        })
        let money = parseFloat(that.money);
        if (that.rechar_id == 0) {
          if (Number.isNaN(money)) {
            return that.$util.Tips({
              title: '充值金额必须为数字'
            });
          }
          if (money <= 0) {
            return that.$util.Tips({
              title: '充值金额不能为0'
            });
          }
          if (money > 50000) {
            return that.$util.Tips({
              title: '充值金额最大值为50000'
            });
          }
        } else {
          money = that.money
        }
        if (that.payType == 'alipay') {
          // #ifdef H5
          that.payChannel = 'alipay';
          // #endif
          // #ifdef APP-PLUS
          that.payChannel = 'alipayApp';
          // #endif
        } else {
          // #ifdef H5
          that.payChannel = that.$wechat.isWeixin() ? "public" : "h5";
          // #endif
          // #ifdef MP
          that.payChannel = "mini";
          // #endif
          // #ifdef APP-PLUS
          that.payChannel = that.systemPlatform === 'ios' ? 'wechatIos' : 'wechatAndroid';
          // #endif
        }
        rechargeCreateApi({
          payChannel: that.payChannel,
          price: money,
          payType: that.payType,
          groupDataId: that.rechar_id
        }).then(res => {
          uni.hideLoading();
          that.pay(res);
        }).catch(err => {
          uni.hideLoading();
          return that.$util.Tips({
            title: err
          })
        });
      }
    }),
    pay(res) {
      let that = this
      switch (that.payType) {
        case 'weixin':
          // #ifdef APP-PLUS
          let jsConfig = res.data.jsConfig;
          uni.requestPayment({
            provider: 'wxpay',
            orderInfo: {
              "appid": jsConfig.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
              "noncestr": jsConfig.nonceStr, // 随机字符串
              "package": "Sign=WXPay", // 固定值
              "partnerid": jsConfig.partnerid, // 微信支付商户号
              "prepayid": jsConfig.packages, // 统一下单订单号
              "timestamp": Number(jsConfig.timeStamp), // 时间戳（单位：秒）
              "sign": that.systemPlatform === 'ios' ? 'MD5' : jsConfig.paySign // 签名，这里用的 MD5 签名
            }, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
            success: function (res) {
              return that.$util.Tips({
                title: '支付成功',
                icon: 'success'
              }, {
                tab: 5,
                url: '/pages/users/user_money/index'
              });
            },
            fail: function (err) {
              return that.$util.Tips({
                title: '支付失败'
              });
            },
            complete: function (res) {
              if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
                title: '取消支付'
              });
            }
          })
          // #endif

          // #ifdef MP
          let jsConfig = res.data.jsConfig;
          uni.requestPayment({
            timeStamp: jsConfig.timeStamp,
            nonceStr: jsConfig.nonceStr,
            package: jsConfig.packages,
            signType: jsConfig.signType,
            paySign: jsConfig.paySign,
            success: function (res) {
              return that.$util.Tips({
                title: '支付成功',
                icon: 'success'
              }, {
                tab: 5,
                url: '/pages/users/user_money/index'
              });
            },
            fail: function (err) {
              return that.$util.Tips({
                title: '支付失败'
              });
            },
            complete: function (res) {
              if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
                title: '取消支付'
              });
            }
          })
          // #endif
          // #ifdef H5
          let jsConfig = res.data.jsConfig;
          let orderNo = res.data.orderNo;
          let data = {
            timestamp: jsConfig.timeStamp,
            nonceStr: jsConfig.nonceStr,
            package: jsConfig.packages,
            signType: jsConfig.signType,
            paySign: jsConfig.paySign
          };
          if (that.payChannel == "h5") {
            uni.hideLoading();
            // that.$util.Tips({
            // 	title: '支付成功'
            // }, {
            // 	tab: 5,
            // 	url: '/pages/users/user_money/index'
            // });
            setTimeout(() => {
              location.href = jsConfig.mwebUrl;
            }, 100)
          } else {
            that.$wechat.pay(data)
                .finally(() => {
                  return that.$util.Tips({
                    title: '支付成功',
                    icon: 'success'
                  }, {
                    tab: 5,
                    url: '/pages/users/user_money/index'
                  });
                })
                .catch(function (err) {
                  return that.$util.Tips({
                    title: '支付失败'
                  });
                });
          }
          // #endif
          break;
        case 'alipay':
          // alipayFull
          // #ifdef APP-PLUS
          let alipayRequest = res.data.alipayRequest;
          uni.requestPayment({
            provider: 'alipay',
            orderInfo: alipayRequest,
            success: (e) => {
              return that.$util.Tips({
                title: '支付成功',
                icon: 'success'
              }, {
                tab: 5,
                url: '/pages/users/user_money/index'
              });
            },
            fail: (e) => {
              return that.$util.Tips({
                title: '支付失败'
              });
            },
            complete: () => {
              uni.hideLoading();
            },
          });
          // #endif
          // #ifdef H5
          that.formContent = res.data.alipayRequest;
          that.$nextTick(() => {
            document.forms['punchout_form'].submit();
          })
          // #endif
          break;
      }
    },
    addMoney() {
      //this.money = this.money.replace(/[^\d]/g, '').replace(/^0{1,}/g, '');
    }
  }
}
</script>

<style lang="scss">
.placeColor {
  color: #fff;
}

.user_payment {
  height: 100vh;
  background-color: #fff;
}

.payment {
  position: relative;
  top: -60rpx;
  width: 100%;
  background-color: #fff;
  border-radius: 10rpx;
  padding-top: 25rpx;
  border-top-right-radius: 14rpx;
  border-top-left-radius: 14rpx;
}

.payment .nav {
  height: 75rpx;
  line-height: 75rpx;
  padding: 0 100rpx;
}

.payment .nav .item {
  font-size: 30rpx;
  color: #333;
}

.payment .nav .item.on {
  font-weight: bold;
  @include tab_border_bottom(theme);
}

.payment .input {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px dashed #dddddd;
  margin: 60rpx auto 0 auto;
  padding-bottom: 20rpx;
  font-size: 56rpx;
  color: #333333;
  flex-wrap: nowrap;

}

.payment .input text {
  padding-left: 106rpx;
}

.payment .input input {
  padding-right: 106rpx;
  width: 310rpx;
  height: 94rpx;
  text-align: center;
  font-size: 70rpx;
}

.payment .placeholder {
  color: #fff;
  height: 100%;
  line-height: 94rpx;
}

.payment .tip {
  font-size: 26rpx;
  color: #888888;
  padding: 0 30rpx;
  // margin-top: 25rpx;
}

.payment .but {
  color: #fff;
  font-size: 30rpx;
  width: 700rpx;
  height: 86rpx;
  border-radius: 43rpx;
  margin: 50rpx auto 0 auto;
  @include linear-gradient(theme);
  line-height: 86rpx;
}

.payment-top {
  width: 100%;
  height: 278rpx;
  @include main_bg_color(theme);

  .name1 {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.8);
    margin-top: -38rpx;
    margin-bottom: 30rpx;
  }

  .pic {
    font-size: 32rpx;
    color: #fff;
  }

  .pic-font {
    font-size: 78rpx;
    color: #fff;
  }
}

.picList {
  display: flex;
  flex-wrap: wrap;
  margin: 30rpx 0;

  .pic-box {
    width: 32%;
    height: auto;
    border-radius: 20rpx;
    margin-top: 21rpx;
    padding: 20rpx 0;
    margin-right: 12rpx;

    &:nth-child(3n) {
      margin-right: 0;
    }
  }

  .pic-box-color {
    background-color: #f4f4f4;
    color: #656565;
  }

  .pic-number {
    font-size: 22rpx;
  }

  .pic-number-pic {
    font-size: 38rpx;
    margin-right: 10rpx;
    text-align: center;
  }

}

.pic-box-color-active {
  @include linear-gradient(theme);
  color: #fff !important;
}

.tips-box {
  .tips {
    font-size: 28rpx;
    color: #333333;
    font-weight: 800;
    margin-bottom: 14rpx;
    margin-top: 20rpx;
  }

  .tips-samll {
    font-size: 24rpx;
    color: #333333;
    margin-bottom: 14rpx;
  }

  .tip-box {
    margin-top: 30rpx;
  }
}

.tips-title {
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #333;
}

.wrapper .item textarea {
  background-color: #f9f9f9;
  width: auto !important;
  height: 140rpx;
  border-radius: 14rpx;
  margin-top: 30rpx;
  padding: 15rpx;
  box-sizing: border-box;
  font-weight: 400;
}

.px-30 {
  padding-left: 30rpx;
  padding-rigt: 30rpx;
}

.wrapper .item .placeholder {
  color: #ccc;
}

.wrapper .item .list {
  margin-top: 35rpx;
}

.wrapper .item .list .payItem {
  border: 1px solid #eee;
  border-radius: 14rpx;
  height: 86rpx;
  width: 95%;
  box-sizing: border-box;
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #282828;
}

.wrapper .item .list .payItem.on {
  // border-color: #fc5445;
  @include coupons_border_color(theme);
  color: $theme-color;
}

.name {
  width: 50%;
  text-align: center;
  border-right: 1px solid #eee;
}

.name .iconfont {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 44rpx;
  background-color: #fe960f;
  color: #fff;
  font-size: 30rpx;
  margin-right: 15rpx;
}

.name .iconfont.icon-weixin2 {
  background-color: #41b035;
}

.name .iconfont.icon-zhifubao {
  background-color: #00AAEA;
}

.payItem .tip {
  width: 49%;
  text-align: center;
  font-size: 26rpx;
  color: #aaa;
}
</style>
